<template>
  <Modal
    v-model="visible"
    width="500"
    title="数据导入"
  >
    <div class="step">
      <h4>第一步</h4>
      <p>请按照数据模板的格式准备导入数据</p>
      <span style="color: #4876FF; cursor: pointer;" @click="onDownload">下载佣金结算单模板</span>
    </div>
    <div class="step">
      <h4>第二步</h4>
      <p>请填写好佣金结算单相关内容</p>
    </div>
    <div class="step">
      <h4>第三步</h4>
      <p>请上传已填写的“佣金结算单模板”</p>
      <div style="display: flex; align-items: flex-end; margin-top: 5px;">
        <Upload ref="upload"
        	:action="upload.reqUrl"
        	:headers="upload.headers"
        	:data="upload.data"
        	:show-upload-list="false"
        	accept=".xls, .xlsx"
          :max-size="10240"
          :on-exceeded-size="onExceededSize"
          :before-upload="onBeforeUpload"
          :on-success="onSuccess"
        >
          <Button>上传文件</Button>
        </Upload>
        <p class="file">
          <span>{{ file.name }}</span>
          <span v-if="errUrl" @click="onDownloadErr">异常信息下载</span>
        </p>
      </div>
    </div>
    
    <div slot="footer" class="footer">
      <Button @click="hide">取消</Button>
      <Button type="primary" @click="onConfirm">导入</Button>
    </div>
  </Modal>
</template>

<script>
  import settlementMgr from '@/biz/commission/settlement.js'
  import toolMgr from '@/biz/base/tool.js'

  export default {
    props: {
			data: Object,
      refresh: Function
    },
    data() {
      return {
        visible: false,
        upload: settlementMgr.upload({ commissionId: this.$route.query.commissionId }),
        file: '',
        info: {},
        errUrl: ''
      }
    },
    methods: {
      onConfirm() {
        if (!this.file) {
          this.$Message.error('请选择文件')
          return
        }
        this.$refs.upload.post(this.file)
      },
      // 上传成功
      onSuccess(res, file, fileList) {
        if (res.code == '200') {
          if (res.data) {
            this.errUrl = res.data
            this.$Message.error('请根据异常信息中提示的问题进行修改后，重新提交')
          } else {
            this.$Message.success('导入成功')
            this.$parent.getDetail()
            this.hide()
          }
        } else {
          this.$Message.error(res.msg)
        }
      },
      onBeforeUpload(file) {
        this.file = file
        return false
      },
      // 文件超过大小
      onExceededSize(file) {
        this.$Message.warning('最大支持10M')
      },
      // 下载异常信息
      onDownloadErr() {
        toolMgr.downloadFile(this.errUrl, `${this.info.housesName}-${this.info.commissionMonth}-异常信息.xls`)
      },
      onDownload() {
        settlementMgr.download(this.$route.query.commissionId).then(res => {
          const a = document.createElement('a')
          const blob = new Blob([res])
          const blobUrl = window.URL.createObjectURL(blob)
          a.download = `${this.info.housesName}-${this.info.commissionMonth}.xls`
          a.href = blobUrl
          a.click()
        })
      },
      show(info) {
        this.visible = true
        this.info = {
          housesName: info.housesName,
          commissionMonth: info.commissionMonth
        }
      },
      hide() {
        this.visible = false
      },
    },
  }
</script>

<style lang='scss' scoped>
  .step {
    margin: 0 0 24px 10px;
    h4 {
      margin-bottom: 5px;
    }
    .file {
      span {
        color: #4876FF;
        text-decoration: underline;
        margin-left: 15px;
        cursor: pointer;
      }
    }
  }
</style>